<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		/*全局变量*/
			*{
				margin: 0;
				padding: 0;
			}
			/*盒子的属性*/
			#container{
				width: 600px;
				height: 400px;
				border: 1px solid #B6B6B6;
				margin: 30px auto;
				position: relative;
				overflow: hidden;
			}
			/*ul宽高*/
			#container ul{
				/*height: 400px;*/
				/*width: 4200px;*/								
			}
			/*ul 下的li*/
			#container ul li{
				width: 600px;
				height: 400px;
				float: left;
				list-style: none;
			}
			/*img宽高100%*/
			#container ul li img{
				width: 100%;
				height: 100%;
			}
			/*主要是给位置*/
			input{
				width: 50px;
				height: 30px;
				position: absolute;
				top: 0;
			}
			/*右边按钮的位置*/
			#right{
				left: 80px;
			}
			/*底下小的壳子放动态的circle的*/
			#container #btn{
				width: 300px;
				height: 30px;
				position: absolute;
				left: 50%;
				margin-left: -150px;
				bottom: 5%;
				display: flex;
				justify-content: center;
			}
			/*里边的p行内块元素还有透明度*/
			#container #btn p{
				display: inline-block;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				
				background: black;
				opacity: 0.4;
			}
			/*span的属性*/
			#container #btn span{
				display: inline-block;
				width: 10px;
				height: 30px;
			}
			/*active的属性*/
			#container #btn p.active{
				opacity: 0.8;
			}
		</style>
		<script src="move.1.2.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				//获取ul、li、btn、right、left、p
				var oUl = document.getElementById("list");
				var aLi = oUl.getElementsByTagName("li");
				var oBtn = document.getElementById("btn");
				var aP = oBtn.getElementsByTagName("p");
				var oLeft = document.getElementById("left");
				var oRight = document.getElementById("right");
				//复制第一张图片，并插入到ul后面；
				var clone = aLi[0].cloneNode(true);
				//console.log(clone)
				//复制出来的加入到ul中
				oUl.appendChild(clone);
				//console.log(aLi.length)
				//ul的宽度自动生成
				oUl.style.width = aLi.length*aLi[0].offsetWidth + "px";
				//动态生成小按钮；
				for(var i = 0; i < aLi.length - 1; i++){
					//创建p
					var p = document.createElement("p");
					//做第一步，如果是第一个circle
					if(i == 0){
						p.className = "active";
					}
					//把p放到btn中
					oBtn.appendChild(p);
					//声明这个span
					var span = document.createElement("span");
					//将把span放到btn中
					oBtn.appendChild(span);
				}
				//声明index
				var index = 0;//当前显示的图片；
				//手动循环；
				oRight.onclick = function(){
					//图片轮播基础功能；当index=最后一个的时候让他返回index=1；并且ul的style
					if(index == aLi.length - 1){
						index = 1;
						oUl.style.marginLeft = 0;
						//else后index++
					}else{
						index ++;
					}
					//console.log(index);
					//调取changepic的函数
					changePic();
				}
				//向左点击事件
				oLeft.onclick = function(){
					//图片轮播基础功能；
					//简单判断假如index=0之后
					if(index == 0){
						index = aP.length - 1;
					}else{
						index--;
					}
					//console.log(index)
					//导入changepic
					changePic();
				}
				//来一个循环鼠标移入一出事件
				for(let i = 0; i < aP.length; i++){
					aP[i].onmouseover = function(){
						index = i;
						clearInterval(timer)
						changePic()
					}
					aP[i].onmouseout = function(){
						timer = setInterval(oRight.onclick,2000)
					}
				}
				//封装一个自动轮播的函数
				function changePic(){//跟换图片，更换btn选中按钮;
						//先是移动的距离，用之前封装好的完美运动
						move(oUl,{"marginLeft":-index*aLi[0].offsetWidth});
						//-----图片轮播基础功能
						//根据index，给对应的p添加active;
						//把所有的aP的className都设为空
						for(var i = 0; i < aP.length; i++){
							aP[i].className = "";							
						}
						//判断到最后一个的时候让第一个的className变为active
						if(index==aLi.length - 1){
							aP[0].className = "active";	
						}
						//然后判断当下标到第几个第几个的className成为active
						aP[index].className = "active";	
				}
				//通过定时器让点击事件每两秒执行一次
				var timer = setInterval(oRight.onclick,2000)
			}
		</script>
	</head>
	<body>
		<div id="container">
			<ul id="list">
				<li><img src="image/pic1.jpg"></li>
				<li><img src="image/pic2.jpg"></li>
				<li><img src="image/pic3.jpg"></li>
				<li><img src="image/pic4.jpg"></li>
				<li><img src="image/pic5.jpg"></li>
				<li><img src="image/pic6.jpg"></li>
			</ul>
			<div id="btn">
				<!--<p class="active"></p><span></span>
				<p></p><span></span>
				<p></p><span></span>
				<p></p><span></span>
				<p></p><span></span>
				<p></p>-->
			</div>
		</div>
		<input type="button" value="向左" id="left">
		<input type="button" value="向右" id="right">
	</body>
</html>
